<template>
	<wakin-list-temp ref="temp" empty-mode="data" page-num-key="pageNum" page-size-key="pageSize" :empty-icon="icon" :bottom-load-text="loadText" :custom-empty="false" :show-load-toast="showLoadToast"
		@loadData="getDatas" @loadStatus="loadStatus">
		<!--插槽:数据列表-->
		<view class="list" slot="render">
			<!--数据卡片-->
			<view class="list-item" v-for="(item, index) of list" :key="index" @tap="details(item)">
				<view class="flex justify-between align-start">
					<view class="event-row">
						<u-icon name="map-fill" color="green"></u-icon>
						<view class="margin-left-sm">
							{{item.eventLocation}}
						</view>
					</view>
					<view class="text-gray margin-left text-nowarp">{{EventStatusEnum[Number(item.eventStatus)] || ""}}&nbsp;></view>
				</view>
				<view v-if="item._urge_" class="event-icon flex justify-center align-center">
					<u--image :src="dbtIconImage" :width="100" :height="100"></u--image>
				</view>
				<view class="margin-top-sm padding-left-xs event-row">
					<u-badge :isDot="true" type="primary"></u-badge>
					<view class="margin-left-sm">{{item.eventName}}</view>
				</view>
				<view class="margin-top-sm padding-left-xs text-gray event-row">
					<u-badge :isDot="true" type="info"></u-badge>
					<view class="margin-left-sm">{{formatTimeStr(item.createTime)}}</view>
				</view>
			</view>
		</view>
		<!--插槽:自定义空提示-->
		<view class="empty" slot="empty">
			<u--image :src="icon" :width="700" :height="800"></u--image>
		</view>
	</wakin-list-temp>
</template>

<script>
	import {
		getEventList as requestApi,
		getEventHistoryDoingList
	} from '@/api/Interface/event'
	import {
		Api
	} from "./config"
	import dbtIconImage from "@/static/event/db.png"
	import {
		formatTimeStr,
		toHump,
		toUnderLine
	} from '../../../../common/utils';
	import {
		RoleEnum
	} from "@/enums/role"
	import {
		EventStatusMap,
		EventStatusEnum
	} from "@/enums/event"
	import {
		WatchMap,
		WatchEnum
	} from "@/enums/event"
	import {
		PathEnum
	} from "../../../../utils/path.config"
	export default {
		name: 'EventList',
		data() {
			return {
				dbtIconImage,
				list: [],
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有数据了'
				},
				showLoadToast: false, // 是否显示加载中toast
				listLoad: true, // 组件数据加载状态
				icon: this.$ListIcon.search,
				baseURL: this.$basic_config.baseUrl,
				MainColor: this.$MainColor,
				WatchMap,
				WatchEnum,
				EventStatusEnum,
				isHistory: false, // 是否是查看"历史待办"
				formatTimeStr
			};
		},
		methods: {
			// 如果list中有需要格式化或操作的字段,则进行定制化操作
			getDatas(e, total, source) {
				this.list = e;
				const isStaff = this.$store.state.user.roles.findIndex(f => f.roleKey === RoleEnum.staff) >= 0;
				this.list.forEach(f => {
					Object.keys(f).map(key => this.$set(f, toHump(key), f[key]));
					this.$set(f, "_w_time", uni.$u.timeFormat(f.sendTime, "yyyy-mm-dd"))
					const can = Number(f.handle)
					this.$set(f, "_urge_", isStaff && f.handle === WatchMap.hasVal && [EventStatusMap.processingVal.toString()].includes(f.eventStatus));
				})
				console.log("事件列表", this.list);
				this.$emit("total", total);
			},
			// 获取列表组件数据加载状态
			loadStatus(e) {
				this.listLoad = e;
			},
			// 连接列表通用子组件模版
			async loadDatas(loadType = this.$ListLoadEnum.load, search, debounce = false, time = 1000) {
				this.isHistory = search.history === PathEnum.history
				await this.$refs.temp.loadDatas({
					loadType,
					search,
					debounce,
					time,
					api: this._setApi(search) // Api[search.status] ?? requestApi
				});
			},
			_setApi(search) {
				// 工作人员:查看历史待办
				if (this.isHistory) {
					return getEventHistoryDoingList;
				} else {
					return Api[search.status] ?? requestApi
				}
			},
			/**
			 * @description 返回item对象,组件类型key
			 */
			details(e) {
				this.$emit('clickItem', e);
			}
		}
	};
</script>

<style lang="less" scoped>
	.event-icon {
		// background-color: #E3EDFF;
		border-radius: 100%;
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
	}

	.list-item {
		background-color: #ffffff;
		border-bottom: 1px solid #f8f8f8;
		padding: 30rpx;
		position: relative;
	}

	.list-item:not(:last-child) {
		border-bottom: 1px solid #f8f8f8;
	}

	.event-row {
		display: flex;
		align-items: center;
	}

	.event-name {
		margin-left: 40rpx;
		position: relative;
	}

	// .event-name::before {
	// 	content: "";
	// 	position: absolute;
	// 	width: 20rpx;
	// 	height: 20rpx;
	// 	background-color: var(--main-color);
	// 	border-radius: 100%;
	// 	top: 0;
	// 	bottom: 0;
	// 	left: 0;
	// 	margin: auto 0;
	// }
</style>